<template>
  <div class="global-header">
    <div class="header-right">
      <a-dropdown>
        <span class="account">
          <a-avatar :key="avatar" :src="imageUrl" size="small"></a-avatar>
          <span class="name">{{ currentUser.username }}</span>
        </span>
        <template v-slot:overlay>
          <a-menu @click="handleCommand">
            <a-menu-item key="setting">
            <span>
              <UserOutlined />
              <span>个人设置</span>
            </span>
            </a-menu-item>
            <a-menu-item key="exception">
            <span>
              <CloseCircleOutlined />
              <span>触发异常</span>
            </span>
            </a-menu-item>
            <a-menu-item key="logout">
            <span>
              <LogoutOutlined />
              <span>退出登陆</span>
            </span>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
import { UserOutlined, CloseCircleOutlined, LogoutOutlined, SettingOutlined } from '@ant-design/icons-vue';
import imageUrl from '../assets/avatar.jpg';

export default {
  name: "CommonHeader",
  components: {
    UserOutlined,
    CloseCircleOutlined,
    LogoutOutlined,
    SettingOutlined,
  },
  data() {
    return {
      currentUser: JSON.parse(sessionStorage.getItem('user_info')),
      imageUrl: imageUrl
    }
  },
  methods: {
    handleCommand({key}) {
      if (key === 'logout') {
        sessionStorage.removeItem('user_info');
        this.$router.push('/user/login');
      }
    }
  }
}
</script>

<style scoped lang="less">
  .global-header{
    position: relative;
    height: 48px;
    background: #fffffe;
    margin: 0;
    padding: 0 16px;
    z-index: 9;
    line-height: 48px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
    box-sizing: border-box;
    .header-right{
      top: 0;
      position: absolute;
      right: 16px;
      .anticon-setting{
        vertical-align: -3px;
        cursor: pointer;
        padding: 0 5px;
      }
      .account{
        padding: 0 20px;
        cursor: pointer;
        display: inline-block;
        .ant-avatar{
          width: 24px;
          height: 24px;
          border-radius: 50%;
          vertical-align: -8px;
          margin-right: 8px;
        }
      }
    }
  }
</style>